<template>
    <div class="system-table-container layout-pd">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="system-table-search">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-input class="mt10" size="default" v-model="state.tableData.param.title" placeholder="请输入主题" clearable @keyup.enter="handleQuery" />
                        <el-input class="mt10" size="default" v-model="state.tableData.param.planHours" placeholder="请输入预估工时" clearable @keyup.enter="handleQuery" />
                        <el-input class="mt10" size="default" v-model="state.tableData.param.assistAdminIds" placeholder="请输入协助人员，如:1,2,3" clearable @keyup.enter="handleQuery" />
                        <el-input class="mt10" size="default" v-model="state.tableData.param.cate" placeholder="请输入所属工作类型" clearable @keyup.enter="handleQuery" />
                        <el-input class="mt10" size="default" v-model="state.tableData.param.isBug" placeholder="请输入是否是问题缺陷,1是,0否" clearable @keyup.enter="handleQuery" />
                        <el-input class="mt10" size="default" v-model="state.tableData.param.priority" placeholder="请输入优先级:1低,2中,3高,4紧急" clearable @keyup.enter="handleQuery" />
                        <el-input class="mt10" size="default" v-model="state.tableData.param.doneRatio" placeholder="请输入完成进度：0,20,40,50,60,80,100" clearable @keyup.enter="handleQuery" />
                        <el-button size="default" class="mt10" type="primary" @click="handleQuery()" :icon="'ele-Search'"> 搜索 </el-button>
                        <el-button size="default" class="mt10" type="info" @click="resetQuery()" :icon="'ele-Refresh'"> 重置 </el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-button size="default"
                                   class="mt10"
                                   type="success"
                                   :icon="'ele-Plus'"
                                   @click="handleAdd"
                                   v-auths="['leadmall:task:add']">新增</el-button>
                        <el-button class="mt10" size="default" type="primary" plain icon="ele-Edit" :disabled="single" @click="handleUpdate()" v-auths="['leadmall:task:edit']">修改</el-button>
                        <el-button size="default"
                                   class="mt10"
                                   type="danger"
                                   icon="ele-Delete"
                                   :disabled="multiple"
                                   @click="handleDelete()"
                                   v-auths="['leadmall:task:remove']">删除</el-button>
                        <el-button class="mt10" size="default" type="warning" plain icon="ele-Download" @click="handleExport" v-auths="['leadmall:task:export']">导出</el-button>
                    </el-col>
                </el-row>
            </div>

            <el-table border v-loading="state.tableData.loading" :data="state.tableData.data" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column show-overflow-tooltip label="" align="center" prop="id" v-if="true" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="父任务id" align="center" prop="pid" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="主题" align="center" prop="title" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="关联项目id" align="center" prop="projectId" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="关联测试id" align="center" prop="testId" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="创建人" align="center" prop="adminId" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="预估工时" align="center" prop="planHours" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="预计结束时间" align="center" prop="endTime" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="实际结束时间" align="center" prop="overTime" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="指派给(负责人)" align="center" prop="directorUid" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="协助人员，如:1,2,3" align="center" prop="assistAdminIds" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="所属工作类型" align="center" prop="cate" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="任务类型" align="center" prop="type" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="前置任务id" align="center" prop="beforeTask" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="是否是问题缺陷,1是,0否" align="center" prop="isBug" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="优先级:1低,2中,3高,4紧急" align="center" prop="priority" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="流转状态：1待办的,2进行中,3已完成,4已拒绝,5已关闭" align="center" prop="flowStatus" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="完成进度：0,20,40,50,60,80,100" align="center" prop="doneRatio" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="任务描述" align="center" prop="content" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="markdown任务描述" align="center" prop="mdContent" min-width="180px"/>
                <el-table-column show-overflow-tooltip label="删除时间" align="center" prop="deleteTime" min-width="180px"/>
                <el-table-column fixed="right" min-width="120px" label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-tooltip content="修改" placement="top">
                            <el-button link type="primary" icon="ele-Edit" @click="handleUpdate(scope.row)" v-auths="['leadmall:task:edit']"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link type="primary" icon="ele-Delete" @click="handleDelete(scope.row)" v-auths="['leadmall:task:remove']"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty  :image-size="200"/>
                </template>
            </el-table>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
                           class="mt15 paginationFlex" :pager-count="5" :page-sizes="[10, 20, 30]"
                           v-model:current-page="state.tableData.param.pageNum" background
                           v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
                           :total="state.tableData.total">
            </el-pagination>
        </el-card>
        <!-- 添加或修改任务对话框 -->
        <TaskDialog ref="taskDialogRef" @refresh="getList()" />
    </div>
</template>

<script setup name="Task" lang="ts">
    import {reactive, ref, defineAsyncComponent,nextTick, watch} from "vue";
    import { listTask, delTask} from '@/leadmall/api/task';
    import { TaskVO } from '@/leadmall/api/task/types';
    import { ElMessage, ElMessageBox,ElTable } from 'element-plus';
    import { download } from "@/api/config/utils/tool";
    // 引入组件
    const TaskDialog = defineAsyncComponent(() => import("./dialog.vue"));
    // 定义变量内容
    const props = defineProps<{
      project: TaskVO;
    }>();
    const multipleSelection = ref<TaskVO[]>([])
    const taskDialogRef = ref();
    const single = ref(true);
    const multiple = ref(true);
    const state = reactive({
        tableData: {
            data: [] as any,
            total: 0 as any,
            loading: false,
            dateRange: [] as any,
            param: {
                pageNum: 1,
                pageSize: 10,
            } as any,
        }
    });
    /** 查询任务列表 */
    const getList = () => {
        state.tableData.loading = true;
        if(props.project?.topicId){
          state.tableData.param.projectId = props.project.topicId;
        }
        listTask(state.tableData.param).then((res)=>{
            if (res.code === 200) {
                state.tableData.data = res.rows;
                state.tableData.total = res.total;
            } else {
                ElMessage.error(res.msg);
            }
        }).catch(() => {
            ElMessage.error('获取数据失败');
        }).finally(() => {
            state.tableData.loading = false;
        });
    }
    // 分页改变
    const onHandleSizeChange = (val: number) => {
        state.tableData.param.pageSize = val;
        getList();
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
        state.tableData.param.pageNum = val;
        getList();
    };
    /** 搜索按钮操作 */
    const handleQuery = () => {
        getList();
    }
    /** 重置按钮操作 */
    const resetQuery = () => {
        state.tableData.param = {
            pageNum: 1,
            pageSize: 10
        };
        handleQuery();
    }
    /** 多选框选中数据 */
    const handleSelectionChange = (selection: TaskVO[]) => {
        multipleSelection.value = selection
        single.value = selection.length != 1;
        multiple.value = !selection.length;
    }
    /** 新增按钮操作 */
    const handleAdd = () => {
        taskDialogRef.value.openDialog("add", { projectId:props.project.topicId});
    }
    /** 修改按钮操作 */
    const handleUpdate = (row?: TaskVO) => {
        taskDialogRef.value.openDialog("edit", row);
    }
    /** 删除按钮操作 */
    const handleDelete = async (row?: TaskVO) => {
        const _ids = row?.id || multipleSelection.value.map((item) => item.id).join(',');
        if (_ids == "") {
            ElMessage.error("请选择要删除的数据");
            return;
        }
        state.tableData.loading= true
        ElMessageBox.confirm('是否确认删除APP信息编号为"' + _ids + '"的数据项？',
            '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
            delTask(_ids);
            ElMessage.success("删除成功");
        }).catch(() => {
            ElMessage.info('已取消删除');
        }).finally(() => {
            getList();
            state.tableData.loading= false
        });

    }
    /** 导出按钮操作 */
    const handleExport = () => {
        download('leadmall/task/export',
            { ...state.tableData.param },
            `task_${new Date().getTime()}.xlsx`)
    }

    watch(
        () => props.project,
        () => {
          nextTick(() => {
            getList();
          });
        },
        { deep: true, immediate: true }
    );
</script>
